<template>
  <div class="title" :style="[styleObject]">
    <div style="height: 64px;">{{props.configOption.title}}</div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted} from 'vue'
const props = defineProps({
  configOption: {
    type: Object,
    default:()=>{},
  }
});
let styleObject = computed(()=>{
  return {
    backgroundColor:props.configOption.bgColor || '#000',
    color:props.configOption.textColor || '#fff',
    'backgroundImage':props.configOption.bgImg,
  }
})

// let styleObject = reactive({
//   backgroundColor:props.configOption.bgColor || '#000',
//   color:props.configOption.textColor || '#fff',
//   'backgroundImage':props.configOption.bgImg,
// })

</script>
<style scoped>
.title {
  height: 64px;
  line-height: 64px;
  /* background: #cccfff; */
  text-align: center;
  top: 0;
}
</style>
